<template>
  <div class="dice-simulator">
    <div class="main-container">
      <div class="control-panel">
        <div class="panel-header">
          <h2>控制面板</h2>
        </div>
        <div class="selectors">
          <div class="selector">
            <label>骰子数量：</label>
            <select v-model="diceCount">
              <option v-for="n in 6" :key="`dice-${n}`" :value="n">{{ n }}</option>
            </select>
          </div>
          <div class="selector">
            <label>模拟次数：</label>
            <select v-model="simulationCount">
              <option v-for="n in simulationOptions" :key="`sim-${n}`" :value="n">{{ n }}</option>
            </select>
          </div>
        </div>
        <div class="roll-button">
          <button @click="rollDice" :disabled="isRolling">
            <i class="dice-icon">🎲</i>
            {{ isRolling ? '摇动中...' : '摇一摇' }}
          </button>
        </div>
      </div>
      
      <div class="simulation-section">
        <div class="section-header">
          <h2>骰子区域</h2>
        </div>
        <div class="dice-area" :class="{ 'rolling': isRolling }">
          <Dice 
            v-for="(dice, index) in dices" 
            :key="`dice-display-${index}`" 
            :value="dice.value"
            :isRolling="isRolling" 
          />
        </div>
      </div>
    </div>

    <div class="results-section">
      <div class="section-header">
        <h2>结果分析</h2>
      </div>
      <div class="action-buttons">
        <button class="comparison-btn" @click="showProbabilityComparison" :disabled="!hasRolled">
          <i class="chart-icon">📊</i>
          显示点数和概率分布
        </button>
      </div>
      <div class="result-display">
        <div v-if="showingProbabilityComparison">
          <ProbabilityComparison 
            :diceCount="diceCount" 
            :simulationCount="simulationCount"
            :simulatedData="simulatedData"
          />
        </div>
        <p v-else-if="hasRolled" class="result-placeholder">
          模拟已完成。请点击上方按钮查看分析结果。
        </p>
        <p v-else class="result-placeholder">点击"摇一摇"开始模拟投掷骰子。</p>
      </div>
    </div>
    
    <!-- 弹窗提示 -->
    <div class="modal" v-if="showModal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>{{ modalTitle }}</h3>
          <span class="close-button" @click="closeModal">&times;</span>
        </div>
        <div class="modal-body">
          <p>{{ modalMessage }}</p>
        </div>
        <div class="modal-footer">
          <button @click="closeModal">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DiceItem from './Dice.vue'
import ProbabilityComparison from './ProbabilityComparison.vue'
import { simulateDiceRolls } from '../utils/probability.js'

export default {
  name: 'DiceSimulator',
  components: {
    Dice: DiceItem,
    ProbabilityComparison
  },
  data() {
    return {
      diceCount: 2,
      simulationCount: 1000,
      simulationOptions: [100, 500, 1000, 5000, 10000],
      dices: [
        { value: 1 },
        { value: 1 }
      ],
      showingProbabilityComparison: false,
      isRolling: false,
      hasRolled: false,
      simulatedData: null,
      showModal: false,
      modalTitle: '',
      modalMessage: ''
    }
  },
  watch: {
    diceCount(newCount) {
      this.updateDiceCount(newCount)
    }
  },
  methods: {
    /**
     * 根据选择的骰子数量更新显示的骰子
     * @param {Number} count - 要显示的骰子数量
     */
    updateDiceCount(count) {
      // 根据选择的骰子数量更新骰子数组
      const newDices = []
      for (let i = 0; i < count; i++) {
        newDices.push({ value: 1 })
      }
      this.dices = newDices
      
      // 重置显示状态
      this.resetDisplay()
      this.hasRolled = false
    },
    
    /**
     * 摇骰子动画和逻辑
     */
    rollDice() {
      // 防止重复点击
      if (this.isRolling) return
      
      this.isRolling = true
      
      // 重置显示状态
      this.resetDisplay()
      
      // 设置动画持续时间
      const animationDuration = 1500 // 毫秒
      const framesPerSecond = 10
      const totalFrames = animationDuration / (1000 / framesPerSecond)
      let currentFrame = 0
      
      // 定时器进行动画
      const animationInterval = setInterval(() => {
        // 更新每个骰子的值为随机数
        this.dices.forEach(dice => {
          dice.value = Math.floor(Math.random() * 6) + 1
        })
        
        currentFrame++
        
        // 动画结束
        if (currentFrame >= totalFrames) {
          clearInterval(animationInterval)
          this.isRolling = false
          this.hasRolled = true
          
          // 执行模拟计算
          this.performSimulation()
          
          // 显示弹窗提示
          this.showModalMessage('模拟完成', `已成功完成${this.simulationCount}次骰子投掷模拟!`)
        }
      }, 1000 / framesPerSecond)
    },
    
    /**
     * 执行模拟计算
     */
    performSimulation() {
      // 调用工具函数进行骰子模拟
      this.simulatedData = simulateDiceRolls(this.diceCount, this.simulationCount)
    },
    
    /**
     * 显示弹窗消息
     */
    showModalMessage(title, message) {
      this.modalTitle = title
      this.modalMessage = message
      this.showModal = true
    },
    
    /**
     * 关闭弹窗
     */
    closeModal() {
      this.showModal = false
    },
    
    /**
     * 显示概率对比组件
     */
    showProbabilityComparison() {
      if (!this.hasRolled) {
        this.showModalMessage('提示', '请先点击"摇一摇"进行模拟')
        return
      }
      
      this.showingProbabilityComparison = true
    },
    
    /**
     * 重置显示状态
     */
    resetDisplay() {
      this.showingProbabilityComparison = false
    }
  }
}
</script>

<style scoped>
.dice-simulator {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.main-container {
  display: flex;
  gap: 30px;
}

.control-panel {
  flex: 0 0 300px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-header, .section-header {
  margin-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
}

h2 {
  margin: 0;
  color: #3a7bd5;
  font-size: 1.4rem;
}

.selectors {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.selector {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.selector label {
  margin-bottom: 8px;
  font-weight: bold;
  color: #555;
}

.selector select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
  font-size: 14px;
  background-color: #f9f9f9;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.roll-button {
  margin-top: auto;
}

.roll-button button {
  width: 100%;
  padding: 12px;
  background-color: #4aade2;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16);
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.roll-button button:hover {
  background-color: #3a97d0;
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.simulation-section {
  flex: 1;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dice-area {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 200px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
}

.results-section {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.action-buttons {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.action-buttons button {
  width: 250px;
  padding: 15px 25px;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16);
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.action-buttons button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.comparison-btn {
  background-color: #5b9bd5;
}

.comparison-btn:hover {
  background-color: #4a8bc5;
}

.result-placeholder {
  text-align: center;
  padding: 40px;
  color: #666;
  font-style: italic;
}

/* 骰子动画样式 */
.dice-area.rolling {
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px) rotate(-5deg); }
  50% { transform: translateX(5px) rotate(5deg); }
  75% { transform: translateX(-5px) rotate(-5deg); }
  100% { transform: translateX(0); }
}

/* 禁用按钮样式 */
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #3a7bd5;
  color: white;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.close-button {
  font-size: 24px;
  cursor: pointer;
}

.modal-body {
  padding: 20px;
  font-size: 16px;
}

.modal-footer {
  padding: 15px 20px;
  text-align: right;
  border-top: 1px solid #eee;
}

.modal-footer button {
  padding: 8px 16px;
  background-color: #3a7bd5;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.modal-footer button:hover {
  background-color: #2a6bc5;
}

@media (max-width: 900px) {
  .main-container {
    flex-direction: column;
  }
  
  .control-panel {
    flex: auto;
  }
}
</style> 